<template>
	<view>
		<uni-nav-bar fixed left-icon="back" title="车费详情" @clickLeft="clickLeft()"></uni-nav-bar>
		<view style="padding-bottom: 100rpx">
			<view class="tui-farepay">
				<view class="tui-farepay-code">
					<view class="tui-farepay-box">
						<view class="tui-farepay-border">
							<view class="tui-fare-after"></view>
							<view class="tui-fare-after"></view>
							<view class="tui-fare-after"></view>
							<view class="tui-fare-after"></view>
							{{fareCode}}
						</view>
					</view>
				</view>
			</view>
			<view class="tui-farepay" v-if="!showList">
				<view class="tui-farepay-row">
					<view class="tui-flex">
						<view class="tui-farepay-flex">停车场</view>
						<view class="tui-farepay-txt">{{list.parkName}}</view>
					</view>
					<view class="tui-flex">
						<view class="tui-farepay-flex">入场时间</view>
						<view class="tui-farepay-txt">{{list.inTime}}</view>
					</view>
					<view class="tui-flex">
						<view class="tui-farepay-flex">停车时长</view>
						<view class="tui-farepay-txt">{{list.parkTime}}</view>
					</view>
					<view class="tui-flex">
						<view class="tui-farepay-flex">应付金额</view>
						<view class="tui-farepay-txt">￥{{list.amountDue}} </view>
					</view>
				</view>
			</view>
			<!--<view class="tui-farepay">
				<view class="tui-farepay-row" style="border-bottom: 2rpx solid #eee;">
					<view class="tui-flex">
						<view>积分抵扣</view>
						<radio class="uni-radio-input" :checked="checked" @click="checked = !checked"/>
					</view>
				</view>
				<view class="tui-farepay-row" v-if="checked">
					<view class="tui-flex">
						<view style="color: #EE6E0D;">100积分</view>
						<view class="tui-farepay-txt">-￥5.00</view>
					</view>
				</view>
			</view>-->
			<view class="tui-farepay">
				<view class="tui-farepay-row" style="border-bottom: 2rpx solid #eee;"
					  v-if="list.amountDue != 0">
					<view class="tui-flex" @tap="showModal = !showModal">
						<view>优惠券</view>
						<view style="text-align: right;color: #999;">
							<text :style="{color:couponText != '暂无优惠券'?'#FF6666':'#999'}">{{couponText}}</text>
							<uni-icons type="arrowright" size="40" color="#999"></uni-icons>
						</view>
					</view>
				</view>
				<view class="tui-farepay-row"style="border-bottom: 2rpx solid #eee;"
					  v-if="list.amountDue != 0">
					<view class="tui-flex pad">
						<view class="tit">
							余额(<text style="font-size: 28rpx;color: #FF6666">
							￥{{walletBalance || 0}}
						</text>)
						</view>
						<view class="ipt uni-easyinput">
							<text style="color: #FF6666">-￥{{Balance || 0}}</text>
						</view>
					</view>
				</view>
				<view class="tui-farepay-row">
					<!--<view class="tui-flex">
						<view style="color: #EE6E0D;">100积分</view>
						<view class="tui-farepay-txt">-￥5.00</view>
					</view>-->
					<view class="tui-flex pad" style="justify-content: flex-end;">
						<!--<text>已优惠:
							<text class="tui-farepay-txt">￥0</text>
						</text>-->
						<text style="padding-left: 20rpx;">小计:
							<text class="tui-farepay-txt">￥{{list.amountDue || 0}}</text>
						</text>
					</view>
				</view>
			</view>
			<view v-if="!showList" class="tui-farecenter">
				<text>为方便您的出场，请提前缴费</text>
			</view>
		</view>


		<view class="tui-tail" v-if="showList">
			<text>暂无停车数据</text>
		</view>

		<pay-btn v-if="list.amountDue == 0" payText="点击开闸" :amount="list.amountDue" @imPayment="paymentOpen"></pay-btn>
		<pay-btn v-else-if="!showList" :amount="totalAmount" @imPayment="paymentTo"></pay-btn>
		<coupon-modal :isShow="showModal"
		              :list="listData"
					  :money="list.amountDue"
		              @closeAlert="handeClose"
		              @closeBtnClose="showModal = !showModal"
		></coupon-modal>
		<!-- 登录提示 -->
		<uni-login-model></uni-login-model>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import payBtn from '@/components/payBtn/index'
    import couponModal from '@/components/coolc-coupon/coupon-modal.vue'
    import uniLoginModel from '@/components/uni-login-model/uni-login-model.vue'
    import { mapState } from 'vuex'
	
	export default {
		name: 'farepay',
		components: {
			uniIcons, payBtn, couponModal, uniLoginModel
		},
		data() {
			return {
				fareCode: '',
				checked: true,
                showModal: false,
				list: {
                    amountDue: undefined,
                    code: undefined,
                    inTime: undefined,
                    parkName: undefined,
                    parkTime: undefined,
                    plateNo: undefined,
                    orderId: undefined,
                    orderNo: undefined
				},
				showList: false,
                listData: [],
                walletBalance: 0,
                Balance: 0,
                couponText: '暂无优惠券',
                couponData: {},
                totalAmount: 0
			}
		},
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo
            })
        },
		onLoad(options) {
            this.walletBalance = this.userInfo.walletBalance
			this.fareCode = options.fareCode.slice(0, 2) + '•'+options.fareCode.slice(2)
			this.parkList(options.fareCode)
			this.loadData()
            let num = 0
            if (this.walletBalance>this.list.amountDue) {
                let balance = 0;
                balance  = this.walletBalance - (this.walletBalance - this.list.amountDue)
                this.Balance = Number(balance.toFixed(2))
            } else {
                num  = this.list.amountDue - this.walletBalance
                this.Balance = this.walletBalance
            }
            this.totalAmount = Number(num.toFixed(2))
            if (this.totalAmount <=0) {
                this.totalAmount = 0
            }
		},
		methods: {
			parkList(fareCode) {
                uni.showLoading({
                    title: '加载中...'
                })
                this.$api.api('park.info', {plateNo: fareCode}).then(res => {
                    uni.hideLoading();
                    if (res.code == 200) {
                        this.list = res.data
                        this.showList = false
                    } else {
                        this.showList = true
                        uni.showToast({ title: res.message, icon: 'none'})
                    }
                }).catch(error => {
                    uni.hideLoading();
                    uni.showToast({ title: error.message, icon: 'none'})
                })
			},
			paymentTo() {
                this.$wx.miniProgram.reLaunch({
                    url: `/pages/parkPay/parkPay?money=${this.totalAmount}&orderNo=${this.list.orderNo}&couponId=${this.listData.couponId}&balance=${this.Balance}&couponAmount=${this.listData.couponAmount}`,
                    success: function(){
                        console.log('success')
                    },
                    fail: function(err){
                    },
                    complete:function(){
                        console.log('complete');
                    }
                });
			},
            //	获取优惠券列表
            loadData() {
                uni.showLoading({title: ''})
                this.$api.api('coupon.list', {status: 0}).then(res => {
                    uni.hideLoading();
                    if (res.code == 200 ){
                        this.listData = res.data
                        for (var i = 0, lenI = this.listData.length; i < lenI; ++i) {
                            this.listData[i].couponId = String(this.listData[i].couponId)
                        }
                        let list = [];
                        res.data.forEach(item => {
                            if (item.useConditionType == 'NONE' || (item.useConditionType == 'FULL_REDUCTION' && this.money == item.useConditionValue)){
                                list.push(item)
                                this.couponText = `有${list.length}张可用`
                                this.listData = list
                            } else {
                                this.listData = []
                            }
                        })
                    } else {
                        uni.showToast({title: res.message, icon: 'none'})
                    }
                }).catch(error => {
                })
            },
			//  开闸
            paymentOpen() {
                this.$api.api('park.open', {orderNo: this.list.orderNo}).then(res => {
                    if (res.code == 200) {
                        uni.navigateBack({ delta: 1 })
                        uni.showToast({title: '开闸成功',})
                    } else {
                        uni.showToast({title: res.message, icon: 'none'})
                    }
                }).catch(error => {
                    uni.showToast({title: error.message, icon: 'none'})
                })
            },
			//	选择优惠券
            handeClose(data) {
                this.showModal = false
                this.couponData = data
                if (data.faceValue == 0) {
                    this.couponText = data.name
                } else {
                    this.couponText = '-￥'+data.faceValue
                }
                let num = 0
                if (data.faceValue>=this.list.amountDue) {
                    this.Balance = 0
                    let number1 = data.faceValue - this.list.amountDue
                    this.totalAmount = Number(number1.toFixed(2))
                } else if (this.walletBalance>this.list.amountDue) {
                    let money  = this.walletBalance -(this.walletBalance - this.list.amountDue) - data.faceValue
                    num = Number(money.toFixed(2))
                    this.Balance = num
                } else {
                    this.Balance = this.walletBalance
                    num  = this.list.amountDue - data.faceValue - this.Balance
                    this.totalAmount = Number(num.toFixed(2))
                }
                if (this.totalAmount <= 0) { this.totalAmount = 0 }
            },
            clickLeft() {
                uni.navigateBack()
            }
		}
	}
</script>

<style lang="scss">
	.tui-farepay {
		padding-top: 40rpx;
		.tui-farepay-code {
			padding: 20rpx 0;
			background-color: #fff;
			.tui-farepay-box {
				background-color: #1866C8;
				width: 400rpx;
				height: 110rpx;
				margin: 0 auto;
				border-radius: 15rpx;
				padding: 6rpx;
				color: #fff;
				.tui-farepay-border {
					height: 94%;
					border: 4rpx solid #fff;
					border-radius: 10rpx;
					font-size: 54rpx;
					text-align: center;
					font-weight: 600;
					padding: 0 20rpx;
					position: relative;
					.tui-fare-after {
						position: absolute;
						width: 20rpx;
						height: 4rpx;
						border-radius: 20rpx;
						background-color: #fff;
						&:nth-child(1) {
							top: 4rpx;
							left: 25%;
						}
						&:nth-child(2) {
							left: 70%;
							top: 4rpx;
						}
						&:nth-child(3) {
							bottom: 4rpx;
							left: 70%;
						}
						&:nth-child(4) {
							bottom: 4rpx;
							left: 25%;
						}
					}
				}
			}
		}
		.tui-farepay-row {
			padding: 20rpx 30rpx;
			background-color: #fff;
			.tui-flex {
				justify-content: space-between;
				font-size: 30rpx;
				.tui-farepay-flex {
					color: #999;
				}
				&:last-child {
					.tui-farepay-txt {
						color: #FF6666;
						font-size: 32rpx;
					}
				}
			}
		}
	}

	.tui-farecenter{
		text-align: center;
		margin: 60rpx;
		font-size: 32rpx;
		color: #999;
	}
	.uni-radio-input {
		/deep/ .uni-radio-input{
			width: 40rpx;
			height: 40rpx;
		}
		/deep/ .uni-radio-input-checked {
			&:before {
				font-size: 36rpx;
			}
		}
	}

</style>
